<template>
            <div class="item" @click="handleItem(movies._id)">
                <img class="pic" :src="movies.pic">
                <div class="text">{{movies.title}}</div>
                <div class="rating" slot="rating">
                    <p>{{movies.rating}}</p>
                    <div class="star" v-for="(value,index) of handleStar(movies.rating)" :key="index">
                        <img v-if="value>1.5" src="../../src/assets/images/icon/star.png">
                        <img v-else-if="value>1" src="../../src/assets/images/icon/ban-star.png">
                        <img v-else src="../../src/assets/images/icon/none-star.png">
                    </div>
                </div>
            </div>
</template>

<script>
    export default {
        props:{
            movies:{
                type:Object
            }
        },
        methods: {
            handleItem(id){
                // this.$router.push(`/movieDetail/${id}&keyword=${keyword}`)
                console.log(id)
                this.$router.push({name:'movieDetail',params:{id:id}})
            },
            handleStar(ele){
                var arr=[];
                for(let i=0;i<5;i++){
                    if(ele>=2){
                    arr.push(2)
                    }else if(ele>=0){
                    arr.push(Number(ele.toFixed(1)))
                    }else{
                    arr.push(0)
                    }
                    ele = ele - 2;
                }
                return arr
            }
        }
    }
</script>

<style scoped>
.item{
    width: 150px;
    font-size: 20px;
}
.item>div{
margin-top: 10px;}
.pic{
    width: 150px;
    height: 150px;
}
.rating{
    display: flex;
}
.star img{
    width: 20px;
    height: 20px;
}
</style>